<template>
    <div class="foot">
    <div class="foot-box" :class="{active: activeBtn == '1'}" @click="toPage(0)">
      <image class="image1" src="../imgs/1.png"></image><br>
      <view class="foot-text">首页</view>
    </div>
    <div class="foot-box" :class="{active: activeBtn == '2'}" @click="toPage(1)">
      <image class="image1" src="../imgs/2.png"></image><br>
      <view class="foot-text">购买</view>
    </div>
    <div class="foot-box" :class="{active: activeBtn == '3'}" @click="toPage(2)">
      <image class="image1" src="../imgs/3.png"></image><br>
      <view class="foot-text">购物车</view>
    </div>
    <div class="foot-box" :class="{active: activeBtn == '4'}" @click="toPage(3)">
      <image class="image1" src="../imgs/4.png"></image><br>
      <view class="foot-text">我的</view>
    </div>
  </div>
</template>

<script>
export default{
	name: 'foot',
	props: {
		activeBtn: String
	},
	methods: {
		toPage(num){

			const arr = [ 
				"/pages/index/index" ,
				"/pages/buy/buy" ,
				"/pages/shopscar/shopscar" ,
				"/pages/me/me"
			]
			uni.reLaunch({	url:arr[num]	})
		},
		
	},
} 
</script>

<style>
.image1{
	width: 5vw;
	height: 5vw;
}
.foot-box{
	width: 30vw;
    color: #82848a;
    text-align: center;
}
.active{
	color: #ff6633;
}
.foot{
	background-color: #fff;
	width: 100%;
    height: 13vw;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -1px 2px 1px rgb(0 0 0 / 10%);
    position: fixed;
    bottom: 0;
}
.add-btn{
	width: 7vw;
    height: 7vw;
    box-shadow: 0 0 3px 2px rgb(0 0 0 / 10%);
    border-radius: 18px;
}
.foot-text{
	font-size: 16px;
	display: block;
}
</style>